GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>Script.aculo.us</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">script.aculo.us</h1>

</header>

</div>

<th colspan="2" class="hintergrundfarbe6" style="font-size:105%; text-align:center;">script.aculo.us

</th></tr>

<tr>

</td></tr>

<tr>

<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten

</th></tr>

<tr>

<td><a href="Softwareentwickler" title="Softwareentwickler">Entwickler</a>

</td>

<td>Thomas Fuchs

</td></tr>

<tr>

<td>Erscheinungsjahr

</td>

<td>Juni 2005

</td></tr>

<tr>

<td>Aktuelle <a href="Version_(Software)" title="Version (Software)">Version</a>

</td>

<td>1.9.0 (23. Dezember 2010)

</td></tr>

<tr>

<td><a href="Betriebssystem" title="Betriebssystem">Betriebssystem</a>

</td>

<td><a href="Plattformunabh%C3%A4ngigkeit" title="Plattformunabhängigkeit">plattformunabhängig</a>

</td></tr>

<tr>

<td><a href="Programmiersprache" title="Programmiersprache">Programmiersprache</a>

</td>

<td><a href="JavaScript" title="JavaScript">JavaScript</a>

</td></tr>

<tr>

<td>Lizenz

</td>

<td><a href="MIT-Lizenz" title="MIT-Lizenz">MIT-Lizenz</a>

</td></tr>

<tr>

<td class="hintergrundfarbe5" colspan="2" style="text-align:center;"><a rel="nofollow" class="external text" href="http://script.aculo.us/">script.aculo.us</a>

</td></tr></tbody></table>

script.aculo.us ist eine <a href="JavaScript" title="JavaScript">JavaScript</a>-<a href="Programmbibliothek" title="Programmbibliothek">Bibliothek</a>, die auf dem JavaScript-Framework <a href="Prototype_(Klassenbibliothek)" title="Prototype (Klassenbibliothek)">Prototype</a> aufbaut. Sie bietet dynamische visuelle Effekte und <a href="Grafische_Benutzeroberfl%C3%A4che" title="Grafische Benutzeroberfläche">GUI</a>-Elemente über das <a href="Document_Object_Model" title="Document Object Model">Document Object Model</a> (DOM). Dadurch wird die Erstellung dynamischer GUIs für Internetseiten stark vereinfacht.

Ganz besonders ist es in <a href="Ruby_on_Rails" title="Ruby on Rails">Ruby on Rails</a> integriert, wird allerdings auch separat angeboten, damit es mit anderen Web Application Frameworks und Scriptsprachen zusammenarbeitet.

script.aculo.us wurde von Thomas Fuchs aus dem Tool fluxiom entnommen, einem webbasierten <a href="Digital-Asset-Management" title="Digital-Asset-Management">Digital-Asset-Management</a>-Tool der Designerfirma wollzelle.<a href="#cite_note-interview-thomasf-1">[1]</a> Der Öffentlichkeit wurde es erstmals im Juni 2005 vorgestellt.

<div class="mw-heading mw-heading2"><h2 id="Merkmale">Merkmale</h2></div>

script.aculo.us erweitert das Prototype JavaScript Framework durch visuelle Effekte, GUI-Elemente und andere Funktionen.

<div class="mw-heading mw-heading3"><h3 id="Visuelle_Effekte">Visuelle Effekte</h3></div>

Es gibt fünf Kerneffekte, script.aculo.us bietet: Opacity, Scale, MoveBy, Highlight, und Parallel. Durch diese Effekte ergeben sich über 16 zusätzliche Effekte, die Kombinationen der Kerneffekte nutzen. Programmierer können diese Effektpalette auch noch erweitern und neue Effekte hinzufügen.

Um einen Effekt zu aktivieren, muss man dem jeweiligen Element eine ID-Bezeichnung zuordnen und eine Zeile Code für den Effekt hinzufügen. Nachfolgend ist ein Beispiel des Effekts Effect.Fade, der auf ein DOM-Element mit der ID 'id_of_element’ angewandt wird:

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>new Effect.Fade('id_of_element');

</pre></div>

Dadurch wird das Element mit der Ziel-ID ausgeblendet und am Ende die CSS-Eigenschaft display-Eigenschaft auf none gesetzt.

Es können einige Einstellungen, wie z. B. die Dauer und Reichweite des Effekts eingestellt werden:

{ duration:2.0, from:0.0, to:0.8 });

</pre></div>

Dadurch wird das Element eingeblendet, der Effekt stoppt allerdings, wenn er 80 % fertig ist (bei einer Deckkraft von 20 %).

<div class="mw-heading mw-heading3"><h3 id="Controls">Controls</h3></div>

Controls bieten GUI-Elemente, darunter:

<ul><li>Drag And Drop

<ul><li>Draggables</li>

<li>Droppables</li>

<li>Sortables</li>

<li>Slider</li></ul></li>

<li>Autocompletion</li>

<li>In Place Editing</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Builder">Builder</h3></div>

Durch den Builder können DOM-Elemente dynamisch erzeugt werden. Durch Benutzung des unteren Beispielcodes …

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>element = Builder.node('div',{id:'ghosttrain'},[

Builder.node('div',{className:'controls',style:'font-size:11px'},[

Builder.node('h1','Ghost Train'),

"testtext", 2, 3, 4,

Builder.node('ul',[

Builder.node('li',{className:'active', onclick:'test()'},'Record')

])

]);

</pre></div>

… wird folgender HTML-Code erzeugt (ohne neue Zeilen):

<h1>Ghost Train</h1>

testtext234

<ul>

<li class="active" onclick="test()">Record</li>

</ul>

</div>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>

<ul><li><a href="JQuery" title="JQuery">jQuery</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>

<ul><li>javascript Bibliotheken. In: <a href="C%E2%80%99t" title="C’t">c’t</a>, 8/2010, S. 154</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://script.aculo.us/">Offizielle Webpräsenz</a></li>

<li><a rel="nofollow" class="external text" href="http://wiki.script.aculo.us/">Dokumentation</a> (Wiki)</li>

<li><a rel="nofollow" class="external text" href="https://slash7.com/articles/2006/04/22/scriptaculous-cheat-sheet-1">Cheat Sheet</a></li>

<li><a rel="nofollow" class="external text" href="http://tutorials.lemme.at/scriptaculous/">Deutschsprachige Effekte-Einführung</a></li>

<li><a rel="nofollow" class="external text" href="https://code.google.com/intl/de-DE/apis/libraries/devguide.html">Google Code developer guide</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-interview-thomasf-1"><a href="#cite_ref-interview-thomasf_1-0">↑</a> Thomas Fuchs: <a rel="nofollow" class="external text" href="http://ajaxian.com/archives/audible-ajax-episode-12-thomas-fuchs-of-scriptaculous">Audible Ajax Episode 12</a> Ajaxian

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-06-28" href="https://de.wikipedia.org/wiki/?title=Script.aculo.us&oldid=257431751">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>